<template>
  <view>
    <u-popup :show="show" mode="center" :closeable="true" :round="12" @close="close" :safeAreaInsetBottom="false">
      <view class="popDialog">
        <view class="font-32 tetx-bold text-center m-b-20">
          {{ type == "balance" ? "余额说明" : "会员卡说明" }}
        </view>
        <scroll-view scroll-y="true" class="scrollh">
          <view class="desc">
            <rich-text :nodes="content" :data-nodes="content"></rich-text>
          </view>
        </scroll-view>
        <view class="know" @click="close()">确定</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import htmlParser from "@/common/js/html-parser";
export default {
  name: "balanceDesc",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "balance", //默认是余额说明   vip 会员卡说明
    },
  },
  data() {
    return {
      content: "",
    };
  },
  created() {
    this.getSetting();
  },
  methods: {
    close() {
      this.$emit("close");
    },
    getSetting() {
      this.$api.sendRequest({
        url: this.type == "balance" ? "/api/member/balanceexplain" : "/api/member/cardexplain",
        data: {},
        success: (res) => {
          if (res.code == 0) {
            if (res.data.content) this.content = htmlParser(res.data.content);
          } else {
            this.$util.showToast({ title: res.message });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.popDialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 640rpx;
  padding: 52rpx 0 20rpx;
  border-radius: 24rpx;
  .scrollh {
    height: 280rpx;
    .desc {
      color: #696e80;
      margin: 40rpx;
    }
  }
  .know {
    width: 100%;
    text-align: center;
    font-size: 34rpx;
    border-top: 1px solid rgba(28, 39, 76, 0.1);
    margin-top: 30rpx;
    padding-top: 20rpx;
  }
}
</style>
